/**
 * RTL (Right-to-Left) 样式
 */

// RTL基础样式
[dir='rtl'] {
  direction: rtl;
  text-align: right;

  // 重置一些默认的LTR样式
  * {
    text-align: inherit;
  }
}

// 导航和菜单的RTL样式
[dir='rtl'] .navigation {
  ul {
    flex-direction: row-reverse;
  }

  li {
    margin-left: 0;
    margin-right: 1rem;

    &:first-child {
      margin-right: 0;
    }

    &:last-child {
      margin-left: 1rem;
    }
  }
}

// 语言切换器的RTL样式
[dir='rtl'] .language-switcher {
  .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
  }

  .language-option {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .flag {
      margin-left: 0.5rem;
      margin-right: 0;
    }
  }
}

// 头部组件的RTL样式
[dir='rtl'] .header {
  .logo {
    margin-left: auto;
    margin-right: 0;
  }

  .nav-links {
    margin-right: auto;
    margin-left: 0;
  }
}

// 主要内容区域的RTL样式
[dir='rtl'] .main-content {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .text-content {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      text-align: right;
    }

    p {
      text-align: right;
      line-height: 1.8; // 阿拉伯语需要更大的行高
    }
  }
}

// 表单元素的RTL样式
[dir='rtl'] .form-elements {
  input,
  textarea,
  select {
    text-align: right;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .input-group {
    .icon {
      right: auto;
      left: 0.75rem;
    }
  }

  .checkbox,
  .radio {
    margin-left: 0;
    margin-right: 0.5rem;
  }
}

// 按钮和链接的RTL样式
[dir='rtl'] .btn {
  &.btn-with-icon {
    .icon {
      margin-left: 0;
      margin-right: 0.5rem;
    }
  }
}

// 卡片和面板的RTL样式
[dir='rtl'] .card {
  .card-header {
    .title {
      text-align: right;
    }

    .actions {
      margin-left: auto;
      margin-right: 0;
    }
  }

  .card-body {
    text-align: right;
  }
}

// 列表的RTL样式
[dir='rtl'] .list {
  ul,
  ol {
    padding-left: 0;
    padding-right: 1.5rem;
  }

  .list-item {
    .bullet {
      right: auto;
      left: 0;
    }

    .content {
      margin-left: 0;
      margin-right: 1.5rem;
    }
  }
}

// 网格布局的RTL样式
[dir='rtl'] .grid {
  .grid-item {
    &:first-child {
      margin-right: 0;
      margin-left: auto;
    }

    &:last-child {
      margin-left: 0;
      margin-right: auto;
    }
  }
}

// 页脚的RTL样式
[dir='rtl'] .footer {
  .footer-content {
    text-align: right;
  }

  .footer-links {
    ul {
      justify-content: flex-end;
    }
  }

  .social-links {
    .icon {
      margin-left: 0;
      margin-right: 0.5rem;
    }
  }
}

// 响应式RTL样式
@media (max-width: 768px) {
  [dir='rtl'] {
    .mobile-menu {
      right: auto;
      left: 0;
    }

    .hamburger-menu {
      margin-left: 0;
      margin-right: 1rem;
    }
  }
}

// 动画的RTL调整
[dir='rtl'] {
  .slide-enter-active,
  .slide-leave-active {
    transition: transform 0.3s ease;
  }

  .slide-enter-from {
    transform: translateX(100%);
  }

  .slide-leave-to {
    transform: translateX(100%);
  }
}

// 特殊的阿拉伯语字体优化
[dir='rtl'] {
  font-family: 'Noto Sans Arabic', 'Arial Unicode MS', 'Tahoma', sans-serif;

  // 阿拉伯语数字的处理
  .arabic-numerals {
    unicode-bidi: bidi-override;
    direction: ltr;
  }

  // 混合语言内容的处理
  .mixed-content {
    unicode-bidi: embed;
  }
}
